<template>
	<view class="flex flex-column" style="height: 100%;">
		<view class="personal-info bg-white flex-1">
			<u-cell @click="changeAvatar" title="头像">
				<image slot="value" class="avatar" :src="avatar || '/static/images/home/avatar.png'" mode="scaleToFill"></image>
			</u-cell>
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
			<!-- 	<u-cell-group>
				<u-cell title="姓名" :value="userInfo.realName"></u-cell>
				<u-cell title="手机号码" isLink @click="modifyPhone" :value="userInfo.accountName"></u-cell>
				<u-cell title="身份切换" :value="identity" @click="changeRole" :isLink="identity !== '游客'"></u-cell>
			</u-cell-group> -->
			<u--form :model="form" :rules="rules" ref="uForm" :labelWidth="0">
				<u-form-item prop="nickname" ref="item1">
					<view class="itemform pdx-30 flex align-center">
						<view style="min-width: 110rpx;">姓名：</view>
						<u--input
							v-model="form.nickname"
							:customStyle="{ padding: '0px', height: '88rpx' }"
							placeholderStyle="{color: '#808080'}"
							border="bottom"
							@blur="handelPhone"
							placeholder="请输入姓名"
						></u--input>
					</view>
				</u-form-item>
				<u-form-item prop="mobile" ref="item2">
					<view class="itemform pdx-30 flex align-center">
						<view style="min-width: 110rpx;">手机号：</view>
						<u--input
							v-model="form.mobile"
							:customStyle="{ padding: '0px', height: '88rpx' }"
							placeholderStyle="{color: '#808080'}"
							border="bottom"
							@blur="handelPhone"
							placeholder="请输入手机号"
						></u--input>
					</view>
				</u-form-item>
				<u-form-item prop="email" ref="item2">
					<view class="itemform pdx-30 flex align-center">
						<view style="min-width: 110rpx;">邮箱：</view>
						<u--input
							v-model="form.email"
							:customStyle="{ padding: '0px', height: '88rpx' }"
							placeholderStyle="{color: '#808080'}"
							border="bottom"
							@blur="handelPhone"
							placeholder="请输入邮箱"
						></u--input>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="pdx-30 mgb-30">
			<u-button shape="circle" @click="saveuserFn" text="修改信息" type="primary" size="large"></u-button>
		</view>
		<u-action-sheet
			:show="actionShow"
			:actions="actionList"
			:round="10"
			cancelText="取消"
			safeAreaInsetBottom
			@select="handleAction"
			@close="handleActionSheetClose"
		></u-action-sheet>
	</view>
</template>

<script>
import { getuserinfo, saveuserinfo } from '@/api/api.js'
import { chooseImage } from '@/utils/image.js'
import { getItem } from '../../utils/storage'
export default {
	data() {
		return {
			form: {
				nickname: '',
				email: '',
				mobile: '',
				gender: '',
				birthday: '',
				bio: ''
			},
			avatar: '',
			actionShow: false,
			actionList: [
				{
					name: '拍照',
					value: 'camera'
				},
				{
					name: '从手机相册选择',
					value: 'album'
				}
			]
		}
	},
	onLoad() {
		this.getUser()
	},
	methods: {
		addListener() {
			uni.$once('refreshUser', this.getUser)
		},
		async getUser() {
			const res = await getuserinfo()
			this.form = res.data
			this.avatar = res.data.avatar
		},
		async saveuserFn() {
			let data = {
				nickname: this.form.nickname,
				gender: this.form.gender,
				birthday: this.form.birthday,
				bio: this.form.bio,
				email: this.form.email,
				avatar: this.avatar
			}
			const res = await saveuserinfo(data)
			uni.$u.toast('修改成功')
			uni.$emit('refreshUser')
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			}, 200)
		},
		changeAvatar() {
			this.refreshUser()
			this.actionShow = true
		},
		handleActionSheetClose() {
			this.actionShow = false
		},
		handleAction(action) {
			let that = this
			chooseImage({
				count: 1,
				...this.options,
				sourceType: [action.value],
				success: res => {
					// 图片的本地文件路径列表
					const paths = res.tempFilePaths
					uni.uploadFile({
						url: 'https://sf.21bmw.com/api/common/upload',
						filePath: paths[0],
						name: 'file',
						fileType: 'image',
						formData: { file: paths[0] },
						header: {
							token: getItem('token')
						},
						success(res) {
							if (res.statusCode === 200) {
								let result = JSON.parse(res.data)
								if (result.code === 1) {
									that.avatar = result.data.fullurl
								}
							}
						}
					})
				}
			})
		}
	}
}
</script>

<style lang="scss">
.personal-info {
	.avatar {
		width: 84rpx;
		height: 84rpx;
		border-radius: 42rpx;
	}
}
</style>
